<template>
	<view class="layout">
		<uv-navbar title="约拍" @leftClick="leftClick" :placeholder="true"></uv-navbar>
		<view class="swiper">
			<custom-swiper :list="swiperList" :height="swiperHeight"></custom-swiper>
		</view>
		<view class="content">
			<view class="author">
				<uv-avatar :src="data.author.avatar"></uv-avatar>
				<view class="nickname">{{data.author.nickname}}</view>
			</view>
			<view class="block">
				<view class="title">
					{{data.blogDetail.title}}
				</view>
				<view class="description">
					{{data.blogDetail.content}}
				</view>
			</view>
			<view class="publish-time">
				<view>
					{{formatDate(data.blogDetail.publishTime)}}
				</view>
				<view>
					{{data.blogDetail.ip}}
				</view>
			</view>

		</view>
		<uv-divider class="divider"></uv-divider>
		<view class="comment">
			<view class="count">
				共 200 条评论
			</view>
			<view class="list">
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		apiGetBlogDetails
	} from "../../urls/blog";
	import {
		getWindowSize
	} from "../../utils/system";



	const leftClick = () => {
		uni.navigateBack();
	}
	const swiperHeight = ref(400);
	const swiperList = ref([]);
	const data = ref({
		"id": "1828739507994890000",
		"blogDetail": {
			"title": "在厦门理工新生的一周～ ",
			"ip": "8.8.8.8",
			"type": 0,
			"content": "开学后呆在厦门理工已经一周了，刚开始尊嘟很想念 福州，但感觉遇到的同学和老师都挺好的，还有台湾 来的老师给我们讲故事和哲理，还挺有意思的。中秋假一开始就迫不及待的赶到高铁站，经过晚点人多 的艰辛终于回到家了 #福州 #厦门理工学院 #中秋节",
			"picUrl": [{
				"defaultUrl": "https://yuepai-1308017514.cos.ap-guangzhou.myqcloud.com/default/blog-image/1.jpg",
				"previewUrl": "https://yuepai-1308017514.cos.ap-guangzhou.myqcloud.com/default/blog-image/1.jpg",
				"width": 1440,
				"height": 1080,
				"sort": 0
			}],
			"publishTime": "2024-09-21 18:59:37"
		},
		"blogComment": {},
		"interactInfo": {
			"liked": true,
			"likedCount": 10
		},
		"author": {
			"userId": "200200",
			"avatar": "https://yuepai-df5fgre5.oss-cn-guangzhou.aliyuncs.com/defalut-avatar.jpg",
			"nickname": "朔风"
		}
	});
	const fetchData = async () => {
		const result = await apiGetBlogDetails(blogId.value);
		data.value = result.data;
		swiperList.value = data.value.blogDetail.picUrl.map(item => item.defaultUrl);
	}

	const blogId = ref(0);
	onLoad((e) => {
		blogId.value = e.id;
		fetchData().then(() => {
			// 获得设备的可用窗口宽高
			const {
				windowHeight,
				windowWidth
			} = getWindowSize()
			// 取出第一张图片的宽高
			const {
				width,
				height
			} = data.value.blogDetail.picUrl[0];
			// 计算出第一张图片平铺需要的高度
			const needHeight = (height / width) * windowWidth;
			if (needHeight < 200) {
				swiperHeight.value = 200;
			} else if (needHeight < (windowHeight * 0.65)) {
				swiperHeight.value = needHeight;
			} else {
				swiperHeight.value = windowHeight * 0.65;
			}
		})
	})
	const formatDate = (dateStr) => {
		const date = new Date(dateStr);
		const now = new Date();
		const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
		const yesterday = new Date(today - 24 * 60 * 60 * 1000);

		if (date >= today) {
			return '今天 ' + date.toLocaleTimeString().slice(0, 5);
		} else if (date >= yesterday) {
			return '昨天 ' + date.toLocaleTimeString().slice(0, 5);
		} else {
			return date.toLocaleDateString();
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		.swiper {}

		.content {
			padding: 0 20rpx;
			color: $uni-text-color;

			.author {
				display: flex;
				align-items: center;
				gap: 15rpx;
				padding: 20rpx 0;
			}

			.block {

				.title {
					font-size: 40rpx;
					line-height: 60rpx;
					margin-bottom: 10rpx;
					color: #000;
				}

				.description {
					font-size: 32rpx;
					line-height: 50rpx;
					color: #000;
				}
			}

			.publish-time {
				padding-top: 15px;
				color: $uni-text-color-grey;
				font-size: 25rpx;
				display: flex;
				gap: 10rpx;
			}
		}

		.divider {
			padding: 0 20rpx;
		}

		.comment {
			padding: 0 20rpx;

			.count {
				font-size: 28rpx;
				color: $uni-text-color;
				line-height: 32rpx;
			}
		}
	}


	.indicator-num {
		padding: 4px 6px;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		justify-content: center;
		display: flex;
		flex-direction: row;

		&__text {
			color: #FFFFFF;
			font-size: 13px;
		}
	}
</style>